iOS like switch button with CSS and HTML

Out there is multiple solution of iOS like on/off switch button, but:

  • none of them have that simple HTML as mine
  • none of them is pixel perfect (ok some are :-) but)
  • there is usually missing disabled status
  • they look slightly different then switch on iOS
  • they do not have labels on left side

HTML code

<label class="switch">
  <input type="checkbox">
  <span>This is checkbox label</span>
</label>

SCSS code

$size: 20px;

div {
  max-width:320px;
  margin: 60px auto;
  background: #fff;
  padding:30px 30px 10px 30px;
  border:1px solid #ddd;
}

.switch {
  position: relative;
  display: block;
  padding-bottom: 20px;
  text-align:left;

  input {
    display: none;
  }

  span:after, span:before {
    position: absolute;
    cursor: pointer;
    content: '';
  }
  
  span:before {
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, .1);
    transition: .4s;
    border-radius: 10 * $size;
    width: 2 * $size;
    height: $size;
    right: 0;
  }

  input:checked + span:before {
    background-color: #89c31a;
  }

  input:disabled + span:before {
    background-color: #b9b9b9;
  }
  
  span:after {
    width: $size;
    height: $size;
    background-color: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    top: 1px;
    right: $size;
  }

  input:checked + span:after {
    transform: translateX($size);
  }

  input:disabled + span:after {
    background: rgba(255, 255, 255, .6);
  }
}

#CSS

Edit on GitHub